<script setup lang="ts">

import ToDoInput from "@/practice/Day6/ToDoInputTs.vue";
import ToDoFilter from "@/practice/Day6/ToDoFilterTs.vue";
import ToDoList from "@/practice/Day6/ToDoListTs.vue";
import {computed, ref} from "vue";

class TodoItem {
  id: number;
  text: string;
  completed: boolean;

  constructor(id: number, text: string, completed: boolean) {
    this.id = id;
    this.text = text;
    this.completed = completed;
  }
}

const todoList = ref<TodoItem[]>([
  { id: 1, text: '学习Vue', completed: false },
  { id: 2, text: '完成练习', completed: false }
])
const filterType = ref<'all' | 'active' | 'completed'>('all')

// 接收子组件事件
const handleAdd = (text: String) => {
  todoList.value.push({
    id: Date.now(),
    text: text.trim(),
    completed: false
  })
}

const handleDelete = (id: number) => {
  todoList.value = todoList.value.filter(item => item.id !== id)
}

const handleToggle = (id: number) => {
  const todo = todoList.value.find(item => item.id === id)
  if (todo) todo.completed = !todo.completed
}
// 计算已完成/未完成数量
const completedCount = computed(() =>
    todoList.value.filter(item => item.completed).length
)
const activeCount = computed(() =>
    todoList.value.filter(item => !item.completed).length
)
</script>

<template>
  <div class="container">
    <h1>待办事项</h1>
    <div class="stats">
      <span>已完成: {{ completedCount }}</span>
      <span>未完成: {{ activeCount }}</span>
    </div>
    <to-do-input @add="handleAdd" />
    <to-do-filter v-model:filter-type="filterType" />
    <to-do-list
        :todos="todoList"
        :filter-type="filterType"
        @delete="handleDelete"
        @toggle="handleToggle"
    />
  </div>
</template>

<style scoped>
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}
h1 {
  text-align: center;
  color: #333;
}
</style>